<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <link rel="stylesheet" href="../css/classify.css">
</head>

<body>
    <header>
        <nav>
            <div class="backBox">
                <a href="../pages/index.html">Back</a>
            </div>
            <div class="titleBox">
                分类
            </div>
            <div class="selectBox">
                <select name="city" id="">
                    <option value="">北京市</option>
                    <option value="">上海市</option>
                    <option value="" selected>广州市</option>
                    <option value="">深圳市</option>
                    <option value="">重庆市</option>
                </select>
                <div class="drapDown"></div>
            </div>
        </nav>
    </header>
    <main>
        <div class="banner">
            <div class="circle">
                <div class="imgBox">
                    <img src="../image/classify/美食.png" alt="">
                </div>
                <p>美食</p>
            </div>
            <div class="circle">
                <div class="imgBox">
                    <img src="../image/classify/电影.png" alt="">
                </div>
                <p>电影</p>
            </div>
            <div class="circle">
                <div class="imgBox">
                    <img src="../image/classify/运动.png" alt="">
                </div>
                <p>运动</p>
            </div>
            <div class="circle">
                <div class="imgBox">
                    <img src="../image/classify/唱歌.png" alt="">
                </div>
                <p>唱歌</p>
            </div>
            <div class="spotBox">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="cont">
            <div class="cate">
                <div class="titleBox">
                    <i class="iconfont icon-meishi2"></i>
                    <span>美食类</span>
                    <span>更多<i class="iconfont icon-xiangyou3"></i></span>
                </div>
                <div class="imgBox">
                    <img src="../image/classify/美食1.png" alt="">
                    <img src="../image/classify/美食2.png" alt="">
                    <img src="../image/classify/美食3.png" alt="">
                    <img src="../image/classify/美食4.png" alt="">
                </div>
            </div>
            <div class="film">
                <div class="titleBox">
                    <i class="iconfont icon-dianying1"></i>
                    <span>电影类</span>
                    <span>更多<i class="iconfont icon-xiangyou3"></i></span>
                </div>
                <div class="imgBox">
                    <img src="../image/classify/电影1.png" alt="">
                    <img src="../image/classify/电影2.png" alt="">
                    <img src="../image/classify/电影1.png" alt="">
                    <img src="../image/classify/电影2.png" alt="">
                </div>
            </div>
            <div class="motion">
                <div class="titleBox">
                    <i class="iconfont icon-yundong"></i>
                    <span>运动类</span>
                    <span>更多<i class="iconfont icon-xiangyou3"></i></span>
                </div>
                <div class="imgBox">
                    <img src="../image/classify/运动1.png" alt="">
                    <img src="../image/classify/运动2.png" alt="">
                    <img src="../image/classify/运动3.png" alt="">
                    <img src="../image/classify/运动4.png" alt="">
                </div>
            </div>
            <div class="sing">
                <div class="titleBox">
                    <i class="iconfont icon-changge"></i>
                    <span>唱歌类</span>
                    <span>更多<i class="iconfont icon-xiangyou3"></i></span>
                </div>
                <div class="imgBox">
                    <img src="../image/classify/美食1.png" alt="">
                    <img src="../image/classify/美食2.png" alt="">
                    <img src="../image/classify/美食3.png" alt="">
                    <img src="../image/classify/美食4.png" alt="">
                </div>
            </div>
        </div>
        <!-- 一个高度和footer一样的盒子 -->
        <div class="empty"></div>
    </main>
    <footer>
        <!-- 底部导航栏 -->
        <ul>
            <!-- 首页 -->
            <li>
                <a href="./index.html">
                    <i class="iconfont icon-shouye-xianxing"></i><span>首页</span>
                </a>
            </li>
            <!-- 分类 -->
            <li>
                <a href="./classify.html">
                    <i class="iconfont  icon-fenleiorguangchangorqitatianchong"></i><span>分类</span>
                </a>
            </li>
            <!-- 发现 -->
            <li>
                <a href="./find.html">
                    <i class="iconfont icon-hanhan-01-01"></i><span>发现</span>
                </a>
            </li>
            <!-- 我的 -->
            <li>
                <a href="./me.html">
                    <i class="iconfont icon-wode"></i><span>我的</span>
                </a>
            </li>
        </ul>
    </footer>
</body>

</html>